<template>
  <div id="edit-blog">
    <el-form ref="blog" :model="blog" label-width="80px">
      <el-form-item label="博客标题">
        <el-input v-model="blog.blogTitle"></el-input>
      </el-form-item>
      <!--      <el-form-item label="作者">-->
      <!--        <el-select v-model="blog.blogAuthorId" placeholder="请选择作者">-->
      <!--          <el-option label="Desire" value="Desire"></el-option>-->
      <!--          <el-option label="Ronin" value="Ronin"></el-option>-->
      <!--          <el-option label="Tommy" value="Tommy"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="博客内容">
        <!--        <el-input type="textarea" v-model="blog.content"></el-input>-->
        <mavon-editor
          class="mavonEditor"
          ref=md
          :ishljs="true"
          :toolbars="toolbars"
          @imgAdd="$imgAdd"
          v-model="blog.blogContent"
          v-on:paste="handlePaste"
          v-bind:aria-valuetext="blog.blogContent"
        ></mavon-editor>
      </el-form-item>
      <!--      <el-form-item label="博客摘要">-->
      <!--        <el-input-->
      <!--          type="textarea"-->
      <!--          placeholder="请输入内容"-->
      <!--          v-model="blog.abstract"-->
      <!--          maxlength="100"-->
      <!--          show-word-limit-->
      <!--        >-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="博客分类">
        <el-checkbox-group v-model="blog.blogType">
          <el-checkbox label="Vue.js" name="type"></el-checkbox>
          <el-checkbox label="Node.js" name="type"></el-checkbox>
          <el-checkbox label="React.js" name="type"></el-checkbox>
          <el-checkbox label="Angular4" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否发布">
        <el-radio-group v-model="blog.releaseOrNot" size="small">
          <el-radio label=1 border>发布</el-radio>
          <el-radio label=0 border>未发布</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateBlog">更新</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "edit-blog",
    data() {
      return {
        blog: {
          blogTitle: '',
          blogContent: '',
          blogType: [],
          blogAuthorId: '',
          abstract: '',
          releaseOrNot: 1
        },
        id: this.$route.params.id,
        // markdown
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          mark: true, // 标记
          superscript: true, // 上角标
          quote: true, // 引用
          ol: true, // 有序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          help: true, // 帮助
          code: true, // code
          subfield: true, // 是否需要分栏
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          undo: true, // 上一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          navigation: true // 导航目录
        }
      }
    },
    created() {
      let _this = this
      this.$axios.get("/blog/" + _this.id).then(function (data) {
        console.log(data)
        console.log(data.data.data)
        _this.blog = data.data.data;
      }).catch(function (error) {
        console.log(error);

      })
    },
    methods: {
      updateBlog: function () {

        let blog = {
          id: this.id,
          blogTitle: this.blog.blogTitle,
          blogContent: this.blog.blogContent,
          blogType: this.blog.blogType,
          blogAuthorId: this.blog.blogAuthorId,
          abstract: this.blog.abstract
        }
        let postData = this.$qs.stringify(blog)
        let _this = this;
        this.$axios({
          url: "/blog",
          method: "put",
          data: postData
        }).then(function (data) {
          console.log(data);
          // 修改成功后的提示
          _this.open2();
          _this.goBack();
        }).catch(function (error) {
          console.error(error)
        })
      },
      goBack() {
        // console.log('go back');
        // 跳转到上一页面
        this.$router.go(-1)
      },
      open2() {
        this.$message({
          message: '更新博客成功',
          type: 'success'
        });
      },
      // 绑定@imgAdd event
      $imgAdd(pos, $file) {
        // 第一步.将图片上传到服务器.
        var formdata = new FormData();
        formdata.append('imgFile', $file);
        this.$axios({
          url: '/giteeBlogImg',
          method: 'post',
          data: formdata,
          headers: {'Content-Type': 'multipart/form-data'},
        }).then((url) => {
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          // $vm.$img2Url 详情见本页末尾
          console.log(url)
          this.$refs.md.$img2Url(pos, url.data.msg);
        })
      },
      // 监听粘贴操作
      handlePaste(event) {
        const items = (event.clipboardData || window.clipboardData).items;
        let file = null;

        if (!items || items.length === 0) {
          this.$message.error("当前浏览器不支持本地");
          return;
        }
        // 搜索剪切板items
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.indexOf("image") !== -1) {
            file = items[i].getAsFile();
            break;
          }
        }
        if (!file) {
          this.$message.error("粘贴内容非图片");
          return;
        }
        // 此时file就是我们的剪切板中的图片对象
        // 如果需要预览，可以执行下面代码
        // const reader = new FileReader();
        // reader.onload = event => {
        //   preview.innerHTML = `<img src="${event.target.result}">`;
        // };
        // reader.readAsDataURL(file);
        this.$imgAdd(file);
      }
    },
    computed: {
      prop() {
        let data = {
          subfield: false,// 单双栏模式
          defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
          editable: false,
          toolbarsFlag: false,
          scrollStyle: false,
          boxShadow: false//边框
        }
        return data
      }
    }
  }
</script>

<style scoped>
  div#edit-blog {
    /*text-align: center;*/
    width: 80%;
    height: 100%;
    padding: 20px;
    margin: auto;
    box-sizing: border-box;
    background: #eee;
  }

</style>
